<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:600px;
				height:300px;
				border:1px solid red;
				margin:50px auto;
				/*转换为3d空间*/
				/*transform-style: preserve-3d;*/
				/*视距*/
				/*perspective: 150px;*/
				/*视角 left right top bottom center*/
				/*perspective-origin: top left;*/
			}
			#box div{
				width:100px;
				height: 200px;
				margin:50px auto;
				background: blue;
				transition:2s;
			}
			#box:hover div{
				transform: rotateX(180deg);
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div></div>
		</div>
	</body>
</html>
